This part that needs to go in the head section in header.php:

<script>
// Function to view tab
function viewTab(tabId) {
	// Get all child elements of "contents-container"
	var elements = $('contents-container').childElements();
	// Loop through them all
	for (var i=0, end=elements.length; i<end; i++) {
		// Is clicked tab
		if (tabId == elements[i].id) {
			// - Show element
			elements[i].show();
			// - Make sure css is correct for tab
			$('tab-'+ elements[i].id).addClassName('active-tab');
		}
		// Is not the clicked tab
		else {
			// - Hide
			elements[i].hide();
			// - Make sure css is correct for tab
			$('tab-'+ elements[i].id).removeClassName('active-tab');
		}
	}
}
</script>




The register part that goes in functions.php:

if ( function_exists('register_sidebar') )
	register_sidebar(array('name'=>'Recent Posts'));
	register_sidebar(array('name'=>'Popular Posts'));
	register_sidebar(array('name'=>'Recent Comments'));
	));




The Tabbed box:

<ul id="tabs">
	<li id="tab-content-recent" class="active-tab">
		<a href="javascript:viewTab('content-recent');">Recent</a>
	</li>
	<li id="tab-content-popular">
		<a href="javascript:viewTab('content-popular');">Popular</a>
	</li>
	<li id="tab-content-comments">
		<a href="javascript:viewTab('content-comments');">Comments</a>
	</li>
</ul>
<div id="contents-container">
	<div id="content-recent">
		<! Recent tab widget area >
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Recent Posts') ) : ?><?php endif; ?>
	</div>
	<div id="content-popular" style="display: none;">
		<! Popular tab widget area >
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Popular Posts') ) : ?><?php endif; ?>
	</div>
	<div id="content-comments" style="display: none;">
		<! Comments tab widget area >
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Recent Comments') ) : ?><?php endif; ?>
	</div>
</div>